<template>
  <div>
    <tableComponents :pagination="{ currentPage, pageSize, total: list.all_num }" @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange" @sendUserSearch="receive_search" :searchData="userSearchData" :isHaveExport="false" :isHaveAdd="false"
        @toAdd="add_data" :isShow="true">
      <template v-slot:table>
        <el-table ref="multipleTable" :data="list.data" stripe v-loading="loading" header-row-class-name="head_color" tooltip-effect="dark"
            style="width: 99.8%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" class="tc" width="35"></el-table-column>
          <el-table-column label="头像" min-width="80">
            <template slot-scope="scope">
              <div class="img_bor_tx">
                <img :src="$fnc.getImgUrl(scope.row.avatar)" alt />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="用户信息" min-width="100">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <span>用户账号：</span>
                  <span>{{ scope.row.username || "----" }}</span>
                </div>
                <div>
                  <span>用户昵称：</span>
                  <span>{{ scope.row.nickname || "----" }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="任务信息" min-width="120">
            <template slot-scope="scope">
              <div class="user_table">
                <span>任务单号：</span>
                <small>{{ scope.row.oid || "----" }}</small>
                <br />
                <span>分类id：</span>
                <small>{{ scope.row.cate_id || "----" }}</small>
                <br />
                <span>标签：</span>
                <small>{{ scope.row.label || "----" }}</small>
                <br />
                <span>任务标题：</span>
                <small>{{ scope.row.title || "----" }}</small>
                <br />
                <span>任务说明：</span>
                <small>{{ scope.row.content || "----" }}</small>
                <br />
                <span>当前状态：</span>
                <small>{{ scope.row.status || "----" }}</small>
                <br />
                <span>是否重复：</span>
                <small>{{ scope.row.is_repeat == 1 ? "允许" : "禁止" }}</small>
                <br />
                <!-- <span>宠物排序：</span>
                <small>{{ scope.row.px || "----" }}</small>-->
              </div>
            </template>
          </el-table-column>
          <el-table-column label="数量信息" min-width="100">
            <template slot-scope="scope">
              <div class="user_table">
                <span>任务数量：</span>
                <small>{{ scope.row.number || "----" }}</small>
                <br />
                <span>领取数量：</span>
                <small>{{ scope.row.carry_number || "----" }}</small>
                <br />
                <span>已完成数量：</span>
                <small>{{ scope.row.user_number || "---" }}</small>
                <br />
                <span>人数：</span>
                <small>{{ scope.row.pv || "----" }}</small>
                <br />
                <!-- <span>宠物排序：</span>
                <small>{{ scope.row.px || "----" }}</small>-->
              </div>
            </template>
          </el-table-column>
          <el-table-column label="价格信息" min-width="100">
            <template slot-scope="scope">
              <div class="user_table">
                <span>单价：</span>
                <small>{{ formatMoney(scope.row.price) || "----" }}</small>
                <br />
                <span>总价：</span>
                <small>{{ formatMoney(scope.row.sum_price) || "----" }}</small>
                <br />
                <span>服务费：</span>
                <small>{{ formatMoney(scope.row.service) || "----" }}</small>
                <br />

                <span>支付方式：</span>
                <small>{{ scope.row.pay || "----" }}</small>
                <br />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="时间信息" min-width="140">
            <template slot-scope="scope">
              <div class="user_table">
                <span>限时完成时间：</span>
                <small>{{ scope.row.carry || "----" }}小时</small>
                <br />
                <span>限时审核时间：</span>
                <small>{{ scope.row.audit || "----" }}小时</small>
                <br />
                <span>支付时间：</span>
                <small>{{ scope.row.pay_time | getTimeFormat }}</small>
                <br />
                <span>刷新时间：</span>
                <small>{{ scope.row.refresh_time | getTimeFormat }}</small>
                <br />
                <span>添加时间：</span>
                <small>{{ scope.row.created_time | getTimeFormat }}</small>
                <br />
                <span>更新时间：</span>
                <small>{{ scope.row.update_time | getTimeFormat }}</small>
                <br />
                <!-- <span>宠物排序：</span>
                <small>{{ scope.row.px || "----" }}</small>-->
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="name" label="是否审核" min-width="100">
            <template slot-scope="scope">
              <div>
                <span>审核状态：</span>
                <small>{{
                  scope.row.is_check == 0
                    ? "未审核"
                    : scope.row.is_check == 1
                    ? "已审核"
                    : "审核不通过"
                }}</small>
                <br />
                <span v-show="scope.row.check_reason && scope.row.is_check == 2">驳回原因：</span>
                <small v-show="scope.row.check_reason && scope.row.is_check == 2">{{ scope.row.check_reason }}</small>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="name" label="是否推荐" min-width="80">
            <template slot-scope="scope">
              <el-switch class="zdySwith" :width="82" v-model="scope.row.is_recommend" active-color="#1aad19" inactive-color="#ffffff"
                  active-text="开启" inactive-text="关闭" active-value="1" @change="getOpen($event, scope.row, 'is_recommend')" inactive-value="0">
              </el-switch>
            </template>
          </el-table-column> -->
          <el-table-column prop="name" label="是否置顶" min-width="80">
            <template slot-scope="scope">
              <el-switch class="zdySwith" :width="82" v-model="scope.row.is_top" active-color="#1aad19" inactive-color="#ffffff" active-text="开启"
                  inactive-text="关闭" active-value="1" @change="getOpen($event, scope.row, 'is_top')" inactive-value="0"></el-switch>
            </template>
          </el-table-column>

          <el-table-column width="220" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="seeStep(scope.row)" type="success">查看步骤</el-button>
              <el-button size="mini" @click="seeDoList(scope.row.id)" type="primary">做任务列表</el-button>
              <!-- <el-button size="mini" @click="toedit(scope.row)" type="warning">编辑</el-button> -->
              <el-button size="mini" @click="tocheck(scope.row)" type="warning" :disabled="scope.row.is_check == 0 ? false : true">审核</el-button>

              <el-button :loading="$store.state.isLoading" type="primary" size="mini" @click="comfirmPay(scope.row.id)" v-if="scope.row.is_pay == 0">
                确认支付
              </el-button>
              <el-button size="mini" @click="del(scope.row.id)" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template v-slot:footerLeft>
        <a class="aBtn aBtn_1 aBtn_lan2" @click="delSelection()">删除</a>
      </template>
    </tableComponents>
    <el-dialog :close-on-click-modal="false" title="任务操作" class="tl size_13" width="500px" @close="dia_close" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="是否首页推荐">
          <el-select v-model="editStats.is_recommend" placeholder="请选择推荐状态">
            <el-option v-for="item in is_recommend" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否置顶">
          <el-select v-model="editStats.is_top" placeholder="请选择置顶状态">
            <el-option v-for="item in is_top" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <!-- <el-input v-model="edit_form.price"></el-input> -->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="edit">确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="任务步骤" :append-to-body="true" width="700px" :visible.sync="dialogeditVisible">
      <el-form>
        <el-form-item label="任务名称">
          <span>{{ setp.title }}</span>
        </el-form-item>
        <hr />
        <el-form-item v-for="(item, index) in setp.task_step" :key="item.id" :label="getStep(index)">
          <div class="step">
            <span>{{ item.title }}</span>
            <span>{{ item.copy_text }}</span>
            <div style="width:100%;display:flex;justify-content: flex-start">
              <el-popover placement="right" title trigger="hover" v-for="(img, i) in item.piclink.split('@')" :key="i"
                  style="width:150px;height:150px;overflow:hidden;display: flex;justify-content: center; align-items: center;overflow: hidden;margin-right:15px">
                <img :src="$fnc.getImgUrl(img)" style="widht:100%" alt />
                <img slot="reference" :src="$fnc.getImgUrl(img)" :alt="img" style="width:100%" />
              </el-popover>
            </div>
          </div>
          <hr />
        </el-form-item>

        <el-form-item>
          <div class="know_btn">
            <el-button @click="dialogeditVisible = false" type="primary">我已知晓</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="审核" class="tl size_13" width="800px" :visible.sync="dialogcheckVisible">
      <el-form :model="edit_form" ref="form">
        <el-form-item label="审核：">
          <el-col :span="14">
            <el-radio-group v-model="edit_form.is_check" :disabled="edit_form.is_check == 1 || edit_form.is_check == 2">
              <el-radio label="0">未审核</el-radio>
              <el-radio label="1">已审核</el-radio>
              <el-radio label="2">驳回</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="驳回原因：">
          <el-col :span="14">
            <el-input type="textarea" v-model="edit_form.check_reason"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item class="tc">
          <el-button :loading="$store.state.isLoading" type="primary" @click="checkbtn(edit_form)">编 辑</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <keep-alive>
      <component :is="current" :show="shows" :isAll="true" showType="list" @sendShop="getSend" @isshow="getShow"></component>
    </keep-alive>
  </div>
</template>
<script>
import uploadpic from "@/components/page/pic/up_pic"; //上传图片
import { TaskList } from "@/assets/js/searchData/searchData"; //引入搜索的数据
import xzShop from "@/components/currency/xz_shop.vue";
export default {
  data () {
    return {
      dialogcheckVisible: false,
      shows: true,
      current: "",
      shopinfo: {
        title: ""
      },
      userSearchData: TaskList,
      dialogeditVisible: false,
      // 输入值库
      edit_form: {
        piclink: ""
      },
      // editMsg: {},
      createTime: [],
      formVideo: {
        uid: "",
        uri: "",
        is_recommend: 0,
        // title: "",
        duration: "",
        start_time: "",
        stop_time: ""
      },
      dialogaddVisible: false,
      playurl: "",
      is_edit: false,
      dialogFormVisible: false,
      live_single: {
        piclink: ""
      },
      loading: false,
      list: [],
      allPage: 0,
      allNum: 0,
      pageSize: 10,
      currentPage: 1,
      searchAll: {},
      row: {},
      showCity: true,
      // 头像
      dialogImageUrl: "",
      dialogVisible: false,
      // 推荐
      is_recommend: [
        {
          value: "0",
          label: "不推荐"
        },
        {
          value: "1",
          label: "推荐"
        }
      ],
      // 置顶
      is_top: [
        {
          value: "0",
          label: "不置顶"
        },
        {
          value: "1",
          label: "置顶"
        }
      ],
      edmsgs: {},
      siteid: "",
      siteobj: {},
      changePriceFlag: false,
      nowPlace: "",
      timeMsg: [],
      setp: [],
      editStats: {},
      multipleSelection: [] //多选框玄宗的值
    };
  },
  components: {
    uploadpic,
    xzShop
  },
  created () {
    this.getTaskList();
  },
  methods: {
    comfirmPay (id) {
      var taht = this;
      this.$confirm("是否确认已经支付?", "确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          taht.$api.getTask.confirm_pay({ id }).then(res => {
            if (res.data.code === 200) {
              this.getTaskList();
              taht.$message({
                type: "success",
                message: "确认成功!"
              });
            } else {
              console.log(res);
            }
          });
        })
        .catch(() => {
          taht.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    checkbtn () {
      var params = {};
      params.id = this.edit_form.id;
      params.is_check = this.edit_form.is_check;
      params.check_reason = this.edit_form.check_reason;
      this.$api.getTask.checkTask(params).then(res => {
        this.dialogcheckVisible = false;
        if (res.data.code == 200) {
          this.$swal("审核成功！", res.data.result, "success");
        } else {
          this.$swal("出错了！", res.data.result, "error");
        }
      });
    },
    tocheck (item) {
      this.edit_form = JSON.parse(JSON.stringify(item));
      this.dialogcheckVisible = true;
    },
    getOpen (val, row, key) {
      var params = {};
      params = row;
      params[key] = val;
      delete params.task_step;
      this.$api.getTask.editTasks(params).then(res => {
        if (res.data.code == 200) {
          this.$swal("编辑成功！", res.data.result, "success");
        } else {
          this.$swal("出错了！", res.data.result, "error");
        }
        this.dialogeditVisible = false;
      });
    },
    sorta (a, b) {
      return b - a;
    },
    changePrice (value) {
      this.changePriceFlag = true;
      this.nowPlace = value.title;
      this.timeMsg = value.time_price;
      console.log(value);
    },
    formatMoney (value) {
      return value.split(".")[0] + "." + value.split(".")[1].slice(0, 2);
    },
    // 查看做任务列表
    seeDoList (id) {
      this.$store.commit("addbreadcrumbs", {
        title: "做任务列表",
        url: `/index/task/dotask?id=${id}`
      });
      this.$router.push(`/index/task/dotask?id=${id}`);
    },
    getStep (index) {
      return `第${index + 1}步`;
    },
    // 添加
    add () {
      let params = this.edit_form;
      console.log("comming");
      console.log(this.edit_form);
      this.$api.getTask.addTaskCate(params).then(res => {
        if (res.data.code == 200) {
          this.$swal("添加成功！", "任务添加成功添加", "success");
        } else {
          this.$swal("出错了！", res.data.result, "error");
        }
        this.dialogFormVisible = false;
      });
    },
    // 查看步骤
    seeStep (item) {
      this.dialogeditVisible = true;
      this.setp = item;
    },
    toedit (row) {
      this.editStats.id = row.id;
      this.dialogFormVisible = true;
    },
    // 修改
    edit () {
      let params = this.editStats;
      delete params.task_step;
      this.$api.getTask.editTasks(params).then(res => {
        if (res.data.code == 200) {
          this.$swal("修改成功！", "数据修改成功", "success");
          this.getTaskList();
        } else {
          this.$swal("出错了！", res.data.result, "error");
        }
        this.dialogFormVisible = false;
      });
    },
    // 删除
    del (id) {
      console.log(id);
      let params = {};
      params.id_str = id;
      this.$swal({
        title: "您确定要删除这些信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          this.$api.getTask.delTaskList(params).then(res => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "删除成功", "success");
              this.getTaskList();
            } else {
              this.$swal("删除失败！", res.data.result, "error");
              this.getTaskList();
            }
          });
        }
      });
    },
    // 多选框赋值
    handleSelectionChange (val) {
      //多选框赋值
      console.log(val);
      this.multipleSelection = val;
    },
    // 批量删除
    delSelection () {
      let str = "";
      if (this.multipleSelection.length <= 0) {
        this.$message.error("未选择批量删除");
      } else {
        for (const iterator of this.multipleSelection) {
          str += iterator.id + "@";
        }
        str = str.slice(0, -1); //将最后的@去掉
        console.log(str);
        this.$swal({
          title: "您确定要删除这些信息吗",
          text: "删除后将无法恢复，请谨慎操作！",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "是的，我要删除",
          cancelButtonText: "容我三思"
        }).then(willDelete => {
          if (willDelete.value) {
            let data = { id_str: str };
            this.$api.getTask.delTaskList(data).then(res => {
              if (res.data.code == 200) {
                this.$swal("删除成功！", "您已经删除了这些信息。", "success");
                this.getTaskList();
              } else {
                this.$swal("删除失败！", res.data.result, "error");
              }
            });
          }
        });
      }
    },
    getList () {
      this.$api.getBasketBalls
        .getSiteInformation({ page: 1, page_size: 50 })
        .then(res => {
          this.$store.commit("setallbasket", res.data.result.data);
        });
    },
    getTaskList (params) {
      console.log("he;;o");
      this.$api.getTask.getTaskList(params).then(res => {
        console.log(res);
        this.list = res.data.result;
        this.$store.commit("setTaskCate", res.data.result.data);
      });
    },

    format (value) {
      let time = new Date(parseInt(value) * 1000);
      // console.log(555,time)
      time =
        time.toLocaleDateString().replace(/\//g, "-") +
        " " +
        time.toTimeString().substr(0, 8);
      return time;
    },
    xzshop (str) {
      if (str == "xzShop") {
        if (
          this.$store.state.shopSlist == "" ||
          this.$store.state.shopSlist.page != 1
        ) {
          this.$store.dispatch("getShopsAll", { page: 1, page_size: 10 });
        }
      }
      this.current = str;
      this.shows = true;
    },
    getShow (val) {
      this.shows = val;
    },
    getSend (row) {
      console.log(row);
      if (this.current == "xzShop") {
        console.log(row);
        this.shopinfo = row;
        this.formVideo.pid = row.id;
      }

      // this.$emit("sendRow",row)
    },

    saveeditbtn () {
      var params = {};
      params = this.edit_form;
      this.$api.getPage.edit_reply_isrecommend(params).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess(res.data.result);
          this.edit_form = {};
          this.dialogeditVisible = false;
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    onSuccess (pic) {
      // 图片上传成功的回调
      console.log("9999999999999", pic);
      this.$set(this.edit_form, "piclink", pic);
      this.$set(this.edmsgs, "piclink", pic);

      // this.$set(this.edit_form, "imgs", pic);

      // this.edit_form.cover1 = pic;
    },
    onSuccesss (pic) {
      console.log("isssss");
      this.$set(this.edmsg, "imgs", pic);
      this.$set(this.edit_form, "imgs", pic);
    },
    editbtn (item) {
      this.edit_form = item;
      this.dialogeditVisible = true;
    },

    addbtn () { },

    rev_send_url (val) {
      this.formVideo.uri = val.url;
    },
    add_data () {
      this.dialogFormVisible = true;
    },
    change_recomment (val, row, type) {
      var params = {};
      params.id = row.id;
      if (type == "recomment") {
        params.is_recommend = val;
      } else {
        params.is_check = val;
      }
      this.$api.getPage.edit_reply_isrecommend(params).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess(res.data.result);
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    dia_close () {
      this.playurl = "";
      var x = document.getElementById("videobox");
      x.load();
    },
    showvideo (info) {
      this.dialogFormVisible = true;
      if (info.uri.indexOf("http") < 0) {
        this.playurl =
          "https://inexweb.oss-cn-shenzhen.aliyuncs.com/" + info.uri;
      } else {
        this.playurl = info.uri;
      }
      this.$nextTick(() => {
        var x = document.getElementById("videobox");
        x.load();
      });
    },
    receive_search (obj) {
      // console.log(obj)
      this.searchAll = obj;
      // this.getNewsAll(obj);
      this.getTaskList(obj);
    },
    getNewsAll (params) {
      console.log(1, params);
      console.log("ccccc");
      params.id = this.$route.query.id;
      this.$api.getTask.getTaskList(params).then(res => {
        if (res.data.code === 200) {
          this.loading = false;
          this.list = res.data.result;
          console.log(555);
          console.log(this.list);
        }
      });
    },
    handleSizeChange (val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange (val) {
      this.currentPage = val;
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    },

    reload () {
      this.getNewsAll(this.searchAll);
    },
    // 添加图片
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 删除
    beforeCreate () { }
  }
};
</script>

<style lang="less" scoped>
.myblank button {
  margin: 5px 5px 0 0;
}

.place {
  margin: 5px 0;
}
.is_item {
  display: flex;
  align-items: flex-end;
  .types {
    div {
      width: 200px;
      margin-right: 10px;
    }
    .input {
      margin: 5px 0px;
    }
    display: flex;
  }
  .btn_edit {
    height: 40px;
    margin-left: 10px;
    margin-bottom: 5px;
  }
}
.step {
  display: flex;
  flex-direction: column;
}
.user_table {
  text-align: left;
}
.head_color {
  text-align: left;
}
.el-table td,
.el-table th.is-leaf {
  text-align: left;
}
</style>
